<template>
    <div class="bujudiv">
        <el-container class="buju">
          
            <!-- 左侧 -->
            <el-aside width="200px">
              
              <el-scrollbar>
                <img src="./logo.png" alt="">
                <el-menu router>
                  <el-sub-menu index="1">
                    <template #title>
                      <el-icon><message /></el-icon>仪表盘
                    </template>
                  </el-sub-menu>

                  
                  <el-sub-menu index="2">
                    <template #title>
                      <el-icon><Grid /></el-icon>常用设置
                    </template>
                    <!-- <router-link to="/fsels"></router-link> -->
                    <!-- <router-link to="/fsels"></router-link> -->
                    <el-menu-item index="/fsels"></el-menu-item>
                    <router-view v-slot="{ Component }">
                      <keep-alive>
                        <component :is="Component" />
                      </keep-alive>
                    </router-view>
                  </el-sub-menu>


                  

                  <el-sub-menu index="3">
                    <template #title>
                      <el-icon><Aim /></el-icon>问题
                    </template>
                    <!-- <router-link to="/ssels"></router-link> -->
                    <el-menu-item index="/ssels"></el-menu-item>
                    <router-view v-slot="{ Component }">
                      <keep-alive>
                        <component :is="Component" />
                      </keep-alive>
                    </router-view>
                  </el-sub-menu>


                  <el-sub-menu index="4">
                    <template #title>
                      <el-icon><Trophy /></el-icon>练习&比赛
                    </template>
                    <!-- <router-link to="/tsels"></router-link> -->
                      
                    <el-menu-item index="/tsels"></el-menu-item>
                    <router-view v-slot="{ Component }">
                      <keep-alive>
                        <component :is="Component" />
                      </keep-alive>
                    </router-view>
                  </el-sub-menu>

                  <el-sub-menu index="5">
                    <template #title>
                      <el-icon><Management /></el-icon>课程
                    </template>
                    <!-- <router-link to="/tsels"></router-link> -->
                      
                    <el-menu-item index="/sisels"></el-menu-item>
                    <router-view v-slot="{ Component }">
                      <keep-alive>
                        <component :is="Component" />
                      </keep-alive>
                    </router-view>
                  </el-sub-menu>
                  
                </el-menu>
                
              </el-scrollbar>
            </el-aside>
            
            <el-container class="youce">
            
                <el-header class="tou">
                  <p>
                  <el-icon><Search /></el-icon>
                  <el-icon><Share /></el-icon>
                  <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                   
                  </el-select>
                  </p>
               </el-header>
             
                <el-main class="zhong" >
                    <div class="card" h="30" w="30" m="2" >
                        <el-card class="cd">
                            <template #header>
                              <span>标题</span>
                            </template>
                            <span>主体标签</span>
                        </el-card>
                    </div>
                </el-main>
                <el-footer class="di"></el-footer>
            </el-container>
            
        </el-container>
    </div>

      

</template>
<script>
import { ElMessage } from 'element-plus';
    export default{
        name:'hello',
        data(){
            return{
               options:[
            {
                value: 'username',
                label: 'username',
              },
              {
                value: '设置',
                label: '设置',
              },
              {
                value: '更多',
                label: '更多',
              },
              {
                value: '退出',
                label: '退出',
              },
          ],
          
            }
        },

        methods:{
            cl(){
                return this.msg='到此一游'
            },
            open(){
              ElMessage('版权所有，不可侵权，联系方式：15104014687')
            }
        }
        
    }
</script>
<style>
.bujudiv .buju{
  width: 99%;
  height: 100%;
  position: absolute;
}
.zuoce{
    background-color: white;
    width: 200px;
    height: auto;
}
.tou{
  background-color: #F9FAFC;
}
.tou p{
    margin-top: 20px;
    text-align: center;
    float: right;
}
.tou el-icon{
  width: 30px;
}
.zhong{
    background-color: #d8d8d8;
}
.di{
  background-color: #d8d8d8;
}
.cd{
    width: 70%;
    height: 500px;
    margin: auto;
    
}

</style>